<!--
 * @Author: wangshuguang
 * @Date: 2022-02-17 10:49:37
 * @LastEditTime: 2022-04-15 13:32:36
 * @LastEditors: wangshuguang
 * @Description:  交易概览
-->
<template>
  <div class="PayView">
    <!-- 筛选条件 -->
    <el-card>
      <el-form ref="filterForm" :model="listQuery" class="demo-form-inline" label-width="100px">
        <el-row>
          <el-col :span="24" prop="date">
            <el-form-item label="时间">
              <el-radio-group v-model="filterDate" size="small" @change="dataRadioChange">
                <el-radio-button label="today">今天</el-radio-button>
                <el-radio-button label="yesterday">昨天</el-radio-button>
                <el-radio-button label="week">近7天</el-radio-button>
                <el-radio-button label="fifteen">近15天</el-radio-button>
                <el-radio-button label="thirty">近30天</el-radio-button>
                <el-radio-button label="month">本月</el-radio-button>
              </el-radio-group>&nbsp;
              <!-- <el-date-picker
                v-model="filterTime"
                :clearable="false"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                :default-time="['00:00:00', '23:59:59']"
                size="small"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="pickerChange"
              /> -->
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 数据看板 -->
    <div class="dataCard">
      <el-card>
        <div class="leftLine">
          总收入/元
          <PopoverLabel>包含所有用户使用微信/支付宝进行支付的交易，插件返佣</PopoverLabel>
        </div>
        <div class="money">{{ totalData.totAmt }}元</div>
        <div class="content">
          <div>
            较前一日
            <span class="ratio" :class="totalData.ratioStatus">
              <i :class="'el-icon-caret-'+totalData.ratioStatus" />
              {{ totalData.totAmtRatio }}
            </span>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 折线图 柱状图 -->
    <el-card class="chartContent">
      <el-radio-group v-model="chartType" size="small">
        <el-radio-button label="line">折线图</el-radio-button>
        <el-radio-button label="bar">柱状图</el-radio-button>
      </el-radio-group>
      <div class="chartBox">
        <PayViewLine v-if="chartType == 'line'" :base-data="topChartData" />
        <PayViewBar v-else-if="chartType == 'bar'" :base-data="topChartData" />
      </div>
    </el-card>

    <!-- 底部业务占比 -->
    <el-card class="businessContent">
      <div class="leftLine">各业务收入占比</div>
      <div class="businessBox">
        <div class="left">
          <PayViewCir :base-data="tableData" />
        </div>
        <div class="right">
          <el-table
            :data="tableData"
            height="100%"
            style="width: 100%"
          >
            <el-table-column prop="date" label="排序">
              <template slot-scope="scope">{{ scope.$index + 1 }}</template>
            </el-table-column>
            <el-table-column prop="name" label="类型" />
            <el-table-column prop="money">
              <template slot="header" slot-scope="scope">
                <div>收入金额/元</div>
                <div>(从大到小)</div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import PayViewLine from '@/components/Charts/PayViewLine.vue'
import PayViewCir from '@/components/Charts/PayViewCir.vue'
import PayViewBar from '@/components/Charts/PayViewBar.vue'
import PopoverLabel from '@/components/PopoverLabel/index.vue'
import { getFilterFormPastTime } from '@/utils/format'
import { dateFtt, removePropertyOfNull } from '@/utils'
import { qryDaySumTrade } from '@/api/payCenter'
export default {
  components: { PayViewLine, PayViewCir, PayViewBar, PopoverLabel },
  data() {
    return {
      chartType: 'line',
      filterDate: 'today',
      filterTime: [],
      topChartData: [],
      tableData: [],
      dataCard: {},
      totalData: {},
      listQuery: {
        beginDate: '',
        endDate: ''
      }
    }
  },
  async mounted() {
    // 设置时间查询默认值
    this.filterDate = 'today'
    this.dataRadioChange('today')
  },
  methods: {
    pickerChange(val) {
      // 时间筛选条件切换
      console.log('pickerChange', val)
      this.listQuery.beginDate = val[0]
      this.listQuery.endDate = val[1]
      this.filterDate = ''
      this.fetchData()
    },
    async dataRadioChange(val) {
      // 时间tab切换
      // let dateArr = []
      // if (val == 'nowMonth') {
      //   dateArr = await getFilterFormPastTime('nowMonth')
      // } else {
      //   dateArr = await getFilterFormPastTime(val)
      // }
      // this.listQuery.beginDate = dateArr[0]
      this.listQuery.dateType = val
      // this.listQuery.endDate = dateArr[1]
      // console.log('val', val, dateArr)
      this.filterTime = []
      this.fetchData()
    },
    fetchData() {
      qryDaySumTrade(removePropertyOfNull(this.listQuery)).then(res => {
        console.log('qryDaySumTrade', res)
        if (res.code === 0) {
          const _data = res.data
          const { tradeSort, dayTrade } = _data
          this.totalData = {
            ..._data,
            ratioStatus: _data.totAmtRatio && _data.totAmtRatio.indexOf('-') > -1 ? 'bottom' : 'top'
          }
          console.log('res', res)
          this.tableData = tradeSort
          this.topChartData = dayTrade
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.labelText{
  color: rgb(115, 115, 115);
  font-size: 12px;
}
.leftLine{
  border-left: 3px solid #ffb72f;
  padding-left: 5px;
}
.businessContent{
  margin-top: 20px;
  .businessBox{
    display: flex;
    margin-top: 20px;
    >div{
      width: 50%;
      height: 500px;
    }
  }
}
.chartContent{
  .chartBox{
    height: 350px;
  }
}

.ratio{
  &.bottom{
    color: green;
  }
  &.top{
    color: #FF1A1A;
  }
}
.PayView{
  // background: #fff;
  border-radius: 5px;
  padding: 20px;
  .dataCard{
    display: flex;
    /deep/.el-card{
      margin: 10px 10px 10px 0;
      min-width: 200px;
      .el-card__body{
        padding: 10px 20px;
        .money{
          font-size: 20px;
          margin-top: 15px;
        }
        .content{
          margin-top: 15px;
          font-size: 12px;
        }
      }
    }
  }
  .dataList{
    background: #fff;
  }
}
</style>
